<template>
	<view class="home-page">
		<!-- 搜索框 -->
		<MySearch></MySearch>
		
		<!-- 轮播图 -->
		<swiper class="banner" autoplay="true" circular="true" indicator-dots="true" indicator-color="rgba(255,255,255,0.5)" indicator-active-color="#fff">
			<swiper-item v-for="item in bannerList" :key="item.goods_id">
				<image :src="item.image_src"></image>
			</swiper-item>
		</swiper>
		
		<!-- 导航模块 -->
		<view class="nav">
			<navigator v-for="item in navList" :key="item.name" :url="item.navigator_url" :open-type="item.open_type || 'navigate'">
				<image :src="item.image_src" mode="aspectFill"></image>
			</navigator>
		</view>
		
		<!-- 楼层 -->
		<view class="floor" v-for="(item,index) in floorList" :key="index">
			<view class="floor-title">
				<image :src="item.floor_title.image_src" mode="widthFix"></image>
			</view>
			<view class="floor-content">
				<navigator v-for="item2 in item.product_list" :key="item2.name" :url="item2.navigator_url" :open-type="item2.open_type" >
					<image :src="item2.image_src" :style="{width:`${item2.image_width}rpx`}"></image>
				</navigator>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		
		data() {
			return {
				// 轮播图
				bannerList:[],
				// 导航
				navList:[],
				// 楼层
				floorList:[]
			}
		},
		onLoad() {
			this.getBanner()
			this.getNav()
			this.getFloor()
		},
		async onPullDownRefresh() {
			// 页面事件，-页面下拉
			// Promise.all（）三个事件都完成
		    await Promise.all([
				this.getBanner(),
				this.getNav(),
				this.getFloor()
			])
			// 
			uni.stopPullDownRefresh()
			
			
		},
		methods: {
			async getBanner(){
				const [error,res] = await uni.request({
					url:'https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata',
					method:'GET'
				})
				if(error){
					console.log('有错误',error)
				}else{
					console.log('成功',res)
					this.bannerList = res.data.message
				}
			},
		    async getNav(){
				const [error,res] = await uni.request({
					url:'https://api-hmugo-web.itheima.net/api/public/v1/home/catitems',
					method:'GET'
				})
				if(!error){
					this.navList = res.data.message
				}else{
					console.log(error)
				}
			},
			async getFloor(){
				const [error,res] = await uni.request({
					url:'https://api-hmugo-web.itheima.net/api/public/v1/home/floordata',
					method:'GET'
				})
				if(!error){
					this.floorList = res.data.message
					console.log(res.data)
				}else{
					console.log(error)
				}
			}

		}
	}
</script>

<style lang="scss" scoped>
	
	// 修改滑块分区大小
	.banner{
		
		width: 750rpx;
		height:340rpx ;
		// 修改图片大小
		image{
			width: 750rpx;
			height:340rpx ;
		}
	}
	.nav{
		padding-top: 12rpx ;
		padding-bottom: 43rpx;
		display: flex;
		justify-content: space-around;
		image{
			width: 128rpx;
			height: 140rpx;
		}
	}
	
	// 楼层分区
	.floor{
		.floor-title{
			image{
				width: 100vw;
			}
		}
		.floor-content{
		    image{
				float: left;
				margin-left: 12rpx;
				margin-bottom: 8rpx;
				height:190rpx ;
			}
				navigator:first-child image{
						height: 386rpx;
				}
		}
	}
</style>